<template>
    <div class="createPost-container">
      <el-form
      ref="postForm"
      :model="postForm"
      class="form-container"
      :disabled="isView"
    >
      <div class="createPost-main-container">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-info"></i>基本信息
          </template>
          <el-row gutter="80">
            <div class="postInfo-container">
              <el-col :span="12">
                <el-row>
                  <el-form-item
                    prop="projectId"
                    label-width="180px"
                    label="项目编号："
                  >
                    <el-input
                      v-model="postForm.projectId"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectName"
                    label-width="180px"
                    label="项目名称："
                  >
                    <el-input
                      v-model="postForm.projectName"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectGroupName"
                    label-width="180px"
                    label="所属课题组："
                  >
                    <el-input
                        v-model="postForm.projectGroupName"
                        :maxlength="100"
                        name="name"
                        disabled
                      >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item
                      label-width="180px"
                      label="项目所属部门:"
                      prop="projectDepartment"
                    >
                      <el-input
                        v-model="postForm.projectDepartment"
                        :maxlength="100"
                        name="name"
                        disabled
                      >
                      </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item
                      prop="projectStatus"
                      label-width="180px"
                      label="项目状态："
                    >
                      <el-input
                        v-model="postForm.projectStatus"
                        :maxlength="100"
                        name="name"
                        disabled
                      >
                      </el-input>
                    </el-form-item>
                </el-row>
              </el-col>

              <el-col :span="12">
                <el-row>
                  <el-form-item
                    prop="projectOwnerId"
                    label-width="180px"
                    label="课题组负责人："
                  >
                    <el-input
                      v-model="postForm.projectOwnerName"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectOwnerPhone"
                    label-width="180px"
                    label="负责人电话："
                  >
                    <el-input
                      v-model="postForm.projectOwnerPhone"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectOwnerEmail"
                    label-width="180px"
                    label="负责人邮箱："
                  >
                    <el-input
                      v-model="postForm.projectOwnerEmail"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
              </el-col>
            </div>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="1">
            <template slot="title">
              <i class="header-icon el-icon-info"></i>详细信息
            </template>
            <el-row gutter="80">
              <div class="postInfo-container">
                <el-col :span="12">
                    <el-row>
                      <el-form-item
                        label-width="180px"
                        label="项目来源："
                        prop="projectSource"
                      >
                      <el-input
                        v-model="postForm.projectSource"
                        :maxlength="100"
                        name="name"
                        disabled
                      ></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item
                        label-width="180px"
                        label="项目研究类别："
                        prop="projectCategory"
                      >
                      <el-input
                        v-model="postForm.projectCategory"
                        :maxlength="100"
                        name="name"
                        disabled
                      ></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item
                        label-width="180px"
                        label="项目级别："
                        prop="projectLevel"
                      >
                      <el-input
                        v-model="postForm.projectLevel"
                        :maxlength="100"
                        name="name"
                        disabled
                      ></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item
                        style="margin-bottom: 40px"
                        label-width="180px"
                        label="成果形式："
                        prop="projectResultForm"
                      >
                        <el-input
                          v-model.number="postForm.projectResultForm"
                          class="article-textarea"
                          disabled
                        />
                      </el-form-item>
                    </el-row>
                    <el-row>
                          <el-form-item
                            label-width="180px"
                            label="立项报告："
                          >
                            <el-upload
                              v-if="postForm.projectAttachFileName"
                              class="file-uploader"
                              action="http://localhost:3001/api/projects/upload"
                              :limit="1"
                              :on-preview="handlePreview"
                              :file-list="attachFileList"
                              disabled
                            >
                            </el-upload>
                            <el-alert
                              v-if="!postForm.projectAttachFileName"
                              title="暂无相关数据！"
                              type="info"
                              :closable="false">
                            </el-alert>
                          </el-form-item>
                    </el-row>
                    <el-row>
                          <el-form-item
                            label-width="180px"
                            label="中检报告："
                          >
                            <el-upload
                              v-if="postForm.projectMidReportName"
                              class="file-uploader"
                              action="http://localhost:3001/api/projects/upload"
                              :limit="1"
                              :on-preview="handlePreview"
                              :file-list="midFileList"
                              disabled
                            >
                            </el-upload>
                            <el-alert
                              v-if="!postForm.projectMidReportName"
                              title="暂无相关数据！"
                              type="info"
                              :closable="false">
                            </el-alert>
                          </el-form-item>
                    </el-row>
                    <el-row>
                          <el-form-item
                            label-width="180px"
                            label="结项报告："
                          >
                            <el-upload
                              v-if="postForm.projectFinalReportName"
                              class="file-uploader"
                              action="http://localhost:3001/api/projects/upload"
                              :limit="1"
                              :on-preview="handlePreview"
                              :file-list="finalFileList"
                              disabled
                            >
                            </el-upload>
                            <el-alert
                              v-if="!postForm.projectFinalReportName"
                              title="暂无相关数据！"
                              type="info"
                              :closable="false">
                            </el-alert>
                          </el-form-item>
                    </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-form-item
                      style="margin-bottom: 40px"
                      label-width="180px"
                      label="项目研究方向："
                      prop="projectDirection"
                    >
                      <el-input
                        v-model.number="postForm.projectDirection"
                        class="article-textarea"
                        disabled
                      />
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item
                      style="margin-bottom: 40px"
                      label-width="180px"
                      label="项目主要研究内容："
                    >
                      <el-input
                        v-model="postForm.projectResearchDirection"
                        type="textarea"
                        disabled
                      />
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item
                      label-width="180px"
                      label="项目统计年度："
                      class="postInfo-container-item"
                      prop="projectStatisticalYear"
                    >
                    <el-date-picker
                      v-model="postForm.projectStatisticalYear"
                      type="year"
                      value-format="yyyy"
                      placeholder="选择项目统计年度"
                      disabled
                    >
                    </el-date-picker>
                    </el-form-item>
                  </el-row>
                </el-col>
              </div>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1">
            <template slot="title">
              <i class="header-icon el-icon-info"></i>经费信息
            </template>
            <el-row>
              <el-form-item
                label-width="230px"
                label="项目申请经费分项："
                class="postInfo-container-item"
                prop="projectAppliedCostItems"
              >
                <el-table
                  class="appropriation-table"
                  :data="postForm.projectAppliedCostItems"
                  border
                >
                  <el-table-column label="经费预算科目" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.id}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预算标准（万元）" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.appropriation}}</span>
                    </template>
                  </el-table-column>
<!--                  <el-table-column label="起始日期" align="center">-->
<!--                    <template slot-scope="{ row }">-->
<!--                      <span>{{ row.startDate}}</span>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="结束日期" align="center">-->
<!--                    <template slot-scope="{ row }">-->
<!--                      <span>{{ row.endDate}}</span>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                </el-table>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectAppliedCost"
                label-width="230px"
                label="项目申请经费总额（万元）："
              >
                <el-input
                  v-model="postForm.projectAppliedCost"
                  :maxlength="100"
                  name="name"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectApprovedCost"
                label-width="230px"
                label="项目批准经费："
              >
                <el-input
                  v-model="postForm.projectApprovedCost"
                  :maxlength="100"
                  name="name"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1">
            <template slot="title">
              <i class="header-icon el-icon-info"></i>成员信息
            </template>
            <el-row>
              <el-form-item
                label-width="230px"
                class="postInfo-container-item"
                prop="members"
              >
                <el-table
                  class="appropriation-table"
                  :data="members"
                  border
                >
                  <el-table-column label="队员身份" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userProjectRole}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="员工编号" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.employeeId}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="性别" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userGender}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="电话" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userCellphone}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1">
            <template slot="title">
              <i class="header-icon el-icon-info"></i>时间信息
            </template>
            <el-row gutter="80">
              <el-col :span="12">
                <div class="postInfo-container">
                  <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectDeclareDate"
                label-width="180px"
                label="项目申请日期："
              >
              <el-date-picker
                  v-model="postForm.projectDeclareDate"
                  type="date"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectCreatedDate"
                label-width="180px"
                label="项目立项日期："
              >
                <el-date-picker
                  v-model="postForm.projectCreatedDate"
                  type="date"
                  placeholder="立项日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectStartDate"
                label-width="180px"
                label="项目开始日期："
              >
                <el-date-picker
                  v-model="postForm.projectStartDate"
                  type="date"
                  placeholder="开始日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
                </div>
              </el-col>
              <el-col :span="12">
                <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectExpectedEndDate"
                label-width="180px"
                label="项目计划结项日期："
              >
                <el-date-picker
                  v-model="postForm.projectExpectedEndDate"
                  type="date"
                  placeholder="计划结项日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
                </el-row>
                <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectEndDate"
                label-width="180px"
                label="项目实际结项日期："
              >
                <el-date-picker
                  v-model="postForm.projectEndDate"
                  type="date"
                  placeholder="实际结项日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
                </el-row>
              </el-col>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1">
            <template slot="title">
              <i class="header-icon el-icon-info"></i>审批履历
            </template>
            <el-row>
              <el-form-item
                label-width="230px"
                class="postInfo-container-item"
                prop="projectInformationCheckHistory"
              >
                <el-table
                  class="appropriation-table"
                  :data="postForm.projectInformationCheckHistory"
                  border
                >
                  <el-table-column label="名称" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="审批者" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.operatorName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="审批" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.status}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="意见" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.description}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-form>
  </div>
  </template>

  <script>
  import { fetchProjectById } from "@/api/project";
  import { fetchResearchGroupById } from "@/api/research-group";

  const defaultForm = {
    projectId: "", // 项目编号
    projectName: "", // 项目名称
    projectDeclareId: null,// 项目申报题目id
    projectDeclareName: "", // 项目申报题目
    projectGroupId: null, // 课题组id
    projectGroupName: "", // 课题组名称
    projectOwnerId: null, // 项目负责人ID
    projectOwnerEmployeeId: "", // 项目负责人编号
    projectOwnerName: "", // 项目负责人名字
    projectOwnerPhone: "", // 项目负责人电话
    projectOwnerEmail: "", // 项目负责人邮箱
    projectDepartment: "", // 项目所属部门
    projectSource: "",
    projectCategory: "",
    projectLevel: "",
    projectDirection: "",
    projectResearchDirection: "",
    projectStatus: "项目未立项", // 项目状态
    projectDeclareDate: null,
    projectCreatedDate: null,
    projectStartDate: null,
    projectExpectedEndDate: null,
    projectEndDate: null,
    projectApprovedCost: null, // 项目已批准经费
    projectAppliedCost: null,
    projectAppliedCostItems: [],
    projectResultForm: "",
    projectStatisticalYear: null, // 项目统计年度
    projectAttachFileName: "", // 项目立项报告名字
    projectAttachFileUrl: "", // 项目立项报告地址
    projectChangeReport: "", // 项目变更证明材料
    projectChangeReportName: "", // 项目变更证明材料名称
    projectChangeDescription: "", // 项目变更说明
    projectEthicalApproverId1: 0,
    projectEthicalApproverName1: "",
    projectEthicalApproverId2: null,
    projectEthicalApproverName2: "",
    projectCostApproverId: null,
    projectCostApproverName: "",
    projectPreApproverId: null,
    projectPreApproverName: "",
    projectEndApproverId: null,
    projectEndApproverName: "",
    projectApplicantId: null,
    projectApplicantName: "",
    projectInformationCheckStatus: "科研处立项预审中", // 项目信息审核状态
    projectInformationCheckHistory: null,
    projectMidReportName: "", // 项目中检文件名
    projectMidReport: "", // 项目中检报告
    projectMidDate: null, // 项目中检日期
    projectMidDescription: "", // 项目中检说明
    projectFinalReportName: "", // 项目结项文件名
    projectFinalReport: "", // 项目结项报告
    projectFinalDate: null, // 项目结项日期
    projectFinalDescription: "", // 项目结项说明
    projectMidApproverId: null, // 项目中检者ID
    projectMidApproverName: "", // 项目中检者名字
    projectFinalApproverId: null, // 项目结项者ID
    projectFinalApproverName: "", // 项目结项者名字
    projectCheckStatus: "提交项目中检报告", // 项目审批状态
    projectCheckHistory: null, // 项目审批履历
    projectChangeHistory: null,
    projectChangeStatus: null, // 项目变更状态
    projectEthicCheckCount: 0, // 伦理审批通过个数
    id: undefined,
  };

  export default {
    name: "ProjectDetail",
    props: {
      isView: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        postForm: Object.assign({}, defaultForm),
        loading: false,
        activeNames: ["1"],
        attachFileList: [],
        midFileList: [],
        endFileList: [],
        members: [],
      };
    },
    created() {
      if (this.isView) {
        const id = this.$route.params && this.$route.params.id;
        this.fetchData(id);
      }
    },
    methods: {
      handlePreview(file) {
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        a.download = file.name;
        a.href = file.response? `http://localhost:3001/${file.response.srcurl}` : file.url;
        a.dispatchEvent(event);
        console.log(file);
      },
      fetchData(id) {
        this.loading = true;
        fetchProjectById(id)
          .then((res) => {
            this.postForm = res.data[0];
            this.attachFileList = this.postForm.projectAttachFileName
              ? [
                  {
                    name: this.postForm.projectAttachFileName,
                    url: this.postForm.projectAttachFileUrl,
                  },
                ]
              : [];
            this.midFileList = this.postForm.projectMidReportName
                ? [
                    {
                      name: this.postForm.projectMidReportName,
                      url: this.postForm.projectMidReport,
                    },
                  ]
                : [];
            this.finalFileList = this.postForm.projectFinalReportName
                ? [
                    {
                      name: this.postForm.projectFinalReportName,
                      url: this.postForm.projectFinalReport,
                    },
                  ]
                : [];
            this.postForm.projectAppliedCostItems =
              this.postForm.projectAppliedCostItems?.length > 0
                ? JSON.parse(this.postForm.projectAppliedCostItems)
                : [];
            this.postForm.projectInformationCheckHistory =
              this.postForm.projectInformationCheckHistory?.length > 0
                ? JSON.parse(this.postForm.projectInformationCheckHistory)
                : [];
            fetchResearchGroupById(this.postForm.projectGroupId)
              .then((res) => {
                this.members = res.data[0].researchGroupMembers?.length > 0
                  ? JSON.parse(res.data[0].researchGroupMembers)
                  : [];
                this.loading = false;
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .createPost-container {
    position: relative;

    .steps {
      margin: 50px 0 30px 0;
    }

    .file-uploader .el-upload {
      border: 1px dashed #d9d9d9 !important;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .file-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }
  }

  .identity-container {
    margin-top: 50px;
  }
  </style>
